<template>
  <el-dialog
    :title="`${id || isUnSaveEdit ? '编辑' : '新增'}路径`"
    width="max-content"
    class="el-dialog-box"
    :visible.sync="dialogVisible"
    @close="closeDialog"
  >
    <div class="edit-label-content">
      <div class="container">
        <el-form
          :inline="true"
          ref="myForm"
          :model="form"
          :rules="myFormRules"
          class="demo-form-inline"
        >
          <el-row>
            <el-form-item label="路径" prop="startId">
              <div class="road-form-to">
                <div class="road-form-value">
                  <el-cascader
                    size="mini"
                    class="w270"
                    :clearable="true"
                    :ref="`CascaderShopLocationStart`"
                    :options="shopLocationOptions"
                    v-model="form._startIds"
                    :props="shopLocationProps"
                    @change="
                      handleShopLocationChange(
                        $event,
                        `CascaderShopLocationStart`,
                        `startId`,
                        `startPoint`
                      )
                    "
                  >
                  </el-cascader>
                </div>
                <div class="form-to-img">到</div>
                <div class="road-form-value">
                  <el-cascader
                    size="mini"
                    class="w270"
                    :clearable="true"
                    v-model="form._endIds"
                    :ref="`CascaderShopLocationEnd`"
                    :options="shopLocationOptions"
                    :props="shopLocationProps"
                    @change="
                      handleShopLocationChange(
                        $event,
                        `CascaderShopLocationEnd`,
                        `endId`,
                        `endPoint`
                      )
                    "
                  >
                  </el-cascader>
                </div>
              </div>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="排序" prop="sort">
              <el-input-number
                v-model="form.sort"
                :min="0"
                :max="9999999999"
                type="number"
                size="mini"
                placeholder="请输入"
              >
              </el-input-number>
            </el-form-item>
          </el-row>
        </el-form>
      </div>
    </div>
    <!-- 按键 -->
    <span slot="footer" class="dialog-footer">
      <div class="default-btn" @click="closeDialog">取消</div>
      <div class="default-btn primary-btn" @click="save">确定</div>
    </span>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      isUnSaveEdit: 0,
      id: "",
      dialogVisible: false,
      myFormRules: {
        _startIds: [
          { required: true, message: "请选择开始区域", trigger: "blur" },
        ],
        _endIds: [
          { required: true, message: "请选择到达区域", trigger: "blur" },
        ],
        sort: [{ required: true, message: "请输入排序", trigger: "blur" }],
      },
      form: {},
      shopLocationOptions: [],
      shopLocationProps: {
        label: "name",
        value: "id",
        checkStrictly: true,
        emitPath: true,
      },
    };
  },
  mounted() {
    this.queryShopLocation();
  },
  methods: {
    queryShopLocation() {
      this.$http({
        url: this.$http.adornUrl("/admin/platform/airportStation/list"),
        method: "get",
        params: this.$http.adornParams(),
      }).then(({ data }) => {
        this.shopLocationOptions = data;
      });
    },
    handleShopLocationChange(e, refName, idKey, labelKey) {
      console.log(this.form);
      let nodes = this.$refs[refName].getCheckedNodes(true);
      let node = nodes[0];
      if (node) {
        this.form[idKey] = node.value;
        this.form[labelKey] = node.pathLabels.join(" ");
      } else {
        this.form[idKey] = "";
        this.form[labelKey] = "";
      }
    },

    open(item = {}) {
      this.isUnSaveEdit = item.isUnSaveEdit;
      this.closeDialog();
      this.dialogVisible = true;
      if (item._newSave) {
        this.form = {
          ...item,
        };
      }
      if (item.id) {
        this.id = item.id;
        this.initData();
      }
    },
    initData() {
      this.$http({
        url: this.$http.adornUrl(`/platform/route/${this.id}`),
        method: "get",
      }).then(({ data }) => {
        data._startIds = data.startId;
        data._endIds = data.endId;
        this.form = data;
        this.$nextTick(() => {
          let nodes1 =
            this.$refs.CascaderShopLocationStart.getCheckedNodes(true);
          let nodes2 = this.$refs.CascaderShopLocationEnd.getCheckedNodes(true);
          this.form._startIds = nodes1[0].pathNodes.map((m) => m.value);
          this.form._endIds = nodes2[0].pathNodes.map((m) => m.value);
        });
      });
    },
    save() {
      if (!this.form.startId || !this.form.endId) {
        this.$message.error("请选择完整的路径");
      } else if (
        this.form.sort === null ||
        this.form.sort === undefined ||
        this.form.sort === ""
      ) {
        this.$message.error("请输入排序");
      } else {
        if (this.id) {
          this.$emit("editSave", this.form);
        } else {
          this.$emit("newSave", {
            _newSave: true,
            ...this.form,
          });
        }
        this.id = "";
        this.dialogVisible = false;
      }
    },
    closeDialog() {
      this.dialogVisible = false;
      this.id = "";
      this.form = {
        startId: "",
        startPoint: "",
        endId: "",
        endPoint: "",
        sort: "",
        id: "",
      };
      this.$refs.myForm && this.$refs.myForm.resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  font-size: 14px;
}
.el-input {
  width: 100%;
}

.road-form-to {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .road-form-value {
    height: max-content;
  }
  .form-to-img {
    margin: 0 25px;
    background-image: url("~@/assets/img/point-point-point.png");
    height: 2px;
    width: 55px;
    text-align: center;
    line-height: 2px;
    background-size: 100% 100%;
  }
}
</style>
